<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->
	<!-- 	<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
		<view class="" style="padding: 20rpx 20rpx 0;">
			<view class="search-content">
				<image class="address-img" :src="dw" mode=""></image>
				<text>{{userInfo.city_name}}</text>
				<text style="margin-left: 20rpx;color:rgb(224 218 218);">|</text>
				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请搜索社群名称" v-model="searchVal" @input="changeInput" 
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<!-- <image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image> -->
			</view>
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
			<view class="swiperList flex">

				<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular :indicator-dots="indicatorDots"
					:duration="duration">
					<block v-for="(item,i) in shareList" :key="i" >
						<swiper-item>
							<view class="swiper-item uni-bg-red flex-between" @click="rollFn(item)">
								<image class="noticeImg" :src="notice" mode=""></image>
								<text class="font-overflow"
									style="color:#333333;font-size: 30rpx;max-width: 380rpx;">{{item.title }} </text>
								<text class="" style="color:#999999;margin-right: 50rpx;">{{item.create_time}}</text>
							</view>

						</swiper-item>
					</block>

				</swiper>

			</view>
			<scroll-list ref="list" @load="load" @refresh="refresh">
    
	
			<block v-for="(item,index) in list" :key="index">
			<view class="groupList " >
				<view class="flex-between ">
					<view class="flex-start-center">
						<image class="groupImg" :src="item.head_img" mode=""></image>
						<view class="flex-column-between-start" style="margin-left: 10rpx;height: 156rpx">
						
							<view class="flex-start-center">
								<view class="topMounted flex" v-if="item.sort==1">
									<text>顶置</text>
								</view>
								<view class="font-weight">
									{{item.name}}
								</view>
							</view>
							<view class="font-overflow2 " style="width: 350rpx;color: #999999;">
								<text>{{item.desc}}</text>
							</view>
							<view class="">
								<image class="humanHead" :src="path88" mode=""></image>
								<text style="color: #0191FF;">{{item.allow_join_number}}人 | {{item.create_time}}</text>
							</view>
						</view>
					</view>
					<view class="">
						<view class="addGroup flex" @click="isAllowedFn(item)">
							<text>{{item.is_join==1?'已解锁':'加群'}}</text>
						</view>
						<view class="margin-top_16rpx"  v-if="item.is_join!=1">
							<text :style="userInfo.level_id!=1 ? 'color: #c5c5c5;margin-right: 10rpx;text-decoration: line-through;' : 'color: red;margin-right: 10rpx;'"  >{{item.price}}</text><text>{{currency_name}}</text>
						</view>
					
						<view class="margin-top_16rpx" v-if="item.is_join!=1&&userInfo.level_id!=1">
							<text style="color: red;margin-right: 10rpx;">{{(item.price*((Number(basicConfiguration.community_level_discount))/100)).toFixed(2)}}</text><text>{{currency_name}}</text>
						</view>
						
						<view v-if="item.is_join==1" class="margin-top_16rpx" @click="ViewMembers(item.id)">
							<text >查看群成员</text>
						</view>
					
					</view>
				</view>
				
				
			</view>
			</block>
			</scroll-list>
			<!-- </mescroll-body> -->
			<!-- <view style="height: 125rpx;" class="">
				
			</view> -->
			<sunui-popup ref="myPackagePopup">
				<template v-slot:content>

					<view class=" gzhCard" @click="rechargeFn">
						<view style="text-align: center;margin-top: 336rpx;">
							当前{{currency_name}}不足，请立即充值开启别错过商机群以及
							交友信息等


						</view>

						<view style="color: rgb(153, 153, 153);;" class="text-align_center margin-top_40rpx"
							@click.stop="cancelFn()">
							<text>算了我放弃了</text>
						</view>






					</view>

				</template>
			</sunui-popup>
           <sunui-popup ref="myRollPopup">
           	<template v-slot:content>
           
           		<view class="flex-column ">
           			<scroll-view :scroll-y="true" style="height: 1000rpx;">
           			
           
           				<view v-html="desc" class="">
           
           				</view>
           			</scroll-view>
           		</view>
           
           	</template>
           </sunui-popup>
		   

		</view>
	</view>
</template>

<script>
	export default {
		props: ['show'],
		components: {

		},
		data() {
			return {
				currency_name:uni.getStorageSync("system").currency_name,
				search:this.$img.search,
				daziBg1:this.$img.daziBg1,
				notice:this.$img.notice,
				path88:this.$img.path88,
				dw:this.$img.dw,
				desc:null,
				list:[],
				userInfo: uni.getStorageSync("userInfo"),
				currentIndex: 0,
				heightSystemss: 0,
				duration: 1500,
				listPoster: [],
				autoplay: true,
				interval: 3000,
				searchVal:'',
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				shareList: [ ],
				autoplayBoolen: true,
				indicatorDots: false,
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				form:{
					phone:'',
					sms_code:''
				},
				count:0,
				disableCode: false,
				basicConfiguration:{}
			}
		},
		onLoad() {
            
			// this.createdgetSystemInfo()
			this.init()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
				this.rollMessageFn()
		},
		onShow() {
		    this.$nextTick(() => {
		    	this.$refs.list.refresh();
		    })
		},
		created() {
			this.userInfoFns()
			this.basicConfigurationFn()
			
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			// this.createdgetSystemInfo()
			this.init()
			this.rollMessageFn()
		},
		watch: {
			show: function(value) {
		
				
				this.$nextTick(() => {
					this.$refs.list.refresh();
				})
			}
		},
		methods: {
			// 加载数据
			load(paging) {
				setTimeout(async () => {
			
			
			
			
					const result = await this.$http.post({
						url: this.$api.communityList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							oneself_uid: this.userInfo.id,
			
			
			
						},
						headers: {
							'Authorization': this.userInfo.token
						}
			
					})
			
			
					if (result.code == 0) {
						this.totalNum = result.data.count;
						if (paging.page == 1) this.list = [];
			
						this.list = this.list.concat(result.data.list);
			
			
					} else {
						this.$sun.toast(result.message, 'none')
					}
			
			
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			// 刷新刷剧
			refresh(paging) {
			
				setTimeout(async () => {
			
			
			
			
					const result = await this.$http.post({
						url: this.$api.communityList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							oneself_uid: this.userInfo.id,
			
			
			
						},
						headers: {
							'Authorization': this.userInfo.token
						}
			
					})
			
			
					if (result.code == 0) {
						this.totalNum = result.data.count;
						if (paging.page == 1) this.list = [];
			
						this.list = this.list.concat(result.data.list);
			
			
					} else {
						this.$sun.toast(result.message, 'none')
					}
			
			
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			async userInfoFns() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
			
			
			
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
			
				if (result.code == 0) {
					console.log('data', result.data);
				
					wx.setStorageSync('userInfo', result.data);
					// 判断当前是否为会员  获取基础数据折扣价格
				
			
				}
			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {},
					headers: {
			
					}
			
				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data
			
					wx.setStorageSync('system', result.data);
			
			
				}
			},
			
			// 验证码码倒计60秒
			countDown(seconds) {
				this.count = seconds;
				var countdownTimer = setInterval(() => {
					this.count--;
					if (this.count === 0) {
						clearInterval(countdownTimer);
						this.disableCode = false;
						// 在这里可以触发验证码过期后的操作
					}
				}, 1000);
			},
			async phoneAuthenticationFn(){
				const result = await this.$http.post({
					url: this.$api.phoneAuthentication,
					data: {
							
							phoneNumber:this.form.phone,
							sms_code:this.form.sms_code,
							userId:this.userInfo.id
							
							
							
					},
					headers: {
						'Authorization': this.userInfo.token
					}
							
				})
							
				if (result.code == 0) {
					
					this.$sun.toast(result.message, 'none');
					this.userInfoFns()
					setTimeout(()=>{
						this.$refs.phoneLogin.close()
					},500)
				}else{
					console.log('data', result.data);
					this.$sun.toast(result.message, 'none');
					setTimeout(()=>{
						this.$refs.phoneLogin.close()
					},500)
				}
			},
			closeBtn(){
				
				this.phoneAuthenticationFn()
				
				
				
			},
			async getVerificationCode() {
				if (!this.disableCode) {
					
					if (/^1[3456789]\d{9}$/.test(this.form.phone)) {
						const result = await this.$http.post({
							url: this.$api.sendSmsRequest,
							data: {
							
								phone: this.form.phone
							}
						});
			
						if (result.code == 0) {
						
							this.disableCode = true;
							this.countDown(60);
						} else {
							this.$sun.toast(result.message, 'none');
						}
								
					} else {
						this.$sun.toast('请填写正确的手机号', 'none');
					}
				}
			},
			ViewMembers(id){
				
				 this.$sun.navGo('/pagesA/personalCenter/groupMembers',{id:id})
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.$nextTick(() => {
					this.$refs.list.refresh();
				})
			},
			rollFn(item){
				this.desc=item.desc
				this.$refs.myRollPopup.show({
				style: 'background-color:#fff;width:400rpx;border-radius:10rpx;padding:20rpx',
				bottomClose: true,
				shadeClose: true,
				topclose: true
				});
			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},
			
			async rollMessageFn(){
				const resPoster = await this.$http.post({
					url: this.$api.rollMessage,
					data: {
				
						
				
					},
					headers: {
						'Authorization': this.userInfo.token
					}
				
				})
				
				if (resPoster.code == 0) {
				
				
				
				
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分
				
					this.shareList = resPoster.data.list.map((item)=>{
						return {
							title:item.title,
							desc:item.desc,
							create_time:item.create_time.split(' ')[1]
						}
					});
					console.log(this.shareList)
				
				
				
				
				} else {
				
					this.$sun.toast(resPoster.msg, 'none')
				}
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 5

					},
					headers: {
						// 'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 5);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}



			},
			async isAllowedFn(item) {
				if(uni.getStorageSync("userInfo").disable==0){
					this.$sun.toast('该用户已被拉黑','none')
				}else{
					if(uni.getStorageSync("userInfo").phone){
						
						console.log(item.uid,this.userInfo.id)
						if(item.uid==this.userInfo.id){
							this.$sun.toast('自己的社群自己不可以加入','none')
						}else{
							
							if(item.is_join==1){
								  this.$sun.navGo('/pagesB/index/addScanCode',{id:item.id})
							}else{
								
								uni.showModal({
									title: '提示',
									content: this.userInfo.level_id!=1?'当前加群费用为'+item.price*((Number(this.basicConfiguration.community_level_discount))/100).toFixed(2)+'('+this.currency_name+')':'当前加群费用为'+item.price+'('+this.currency_name+')',
									success: async (res) => {
										if (res.confirm) {
								             // 加群成功跳转
								             
								             const resPoster = await this.$http.post({
								             	url: this.$api.joinCommunity,
								             	data: {
								             
								             		community_id: item.id
								             
								             	},
								             	headers: {
								             		'Authorization': this.userInfo.token
								             	}
								             
								             })
								             
								             if (resPoster.code == 0) {
								             	this.$sun.toast(resPoster.message)
								             	this.$nextTick(() => {
								             		this.$refs.list.refresh();
								             	})
								                setTimeout(()=>{
								             	    this.$sun.navGo('/pagesB/index/addScanCode',{id:item.id})
								                },500)
								                
								             
								             
								             
								             } else {
								                // 没有成功
								                if(resPoster.message=='用户余额不足'){
								                   // this.$refs.myPackagePopup.show({
								                   // 	style: 'padding:50rpx;',
								                   // 	bottomClose: false,
								                   // 	shadeClose: true,
								                   // 	topclose: true
								                   // });
								                   
								                   this.$sun.toast(resPoster.message, 'none')
								                   
								                   setTimeout(()=>{
								                   		this.$sun.navGo('/pagesA/personalCenter/onlineRecharge')
								                   },1000)
								                }
												
								             	// this.$sun.toast(resPoster.message, 'none')
								             }
										
										} else if (res.cancel) {
								
										}
									}
								});
								
							}
						}
					}else{
						// this.$sun.toast('当前未实名认证,请认证在来加群', 'none')
						// setTimeout(()=>{
						// 	this.$sun.navGo('/pagesA/personalCenter/realAuthentication')
						// },1500)
						this.$emit('communityPhoneBol', true)
						
					}
				}

			},
			rechargeFn(){
				this.$refs.myPackagePopup.close()
				setTimeout(()=>{
					
						this.$sun.navGo('/pagesA/personalCenter/onlineRecharge')
					
				},1000)
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			cancelFn() {
				this.$refs.myPackagePopup.close()
			},
			async upCallback(scroll) {
			
				const result = await this.$http.post({
					url: this.$api.communityList,
					data: {
						page: scroll.num,
						limit: 50,
						name:this.searchVal,
						oneself_uid:this.userInfo.id,	
						
						
			
					},
					headers: {
						'Authorization': this.userInfo.token
					}
			
				})
			
			
				if (result.code == 0) {
			
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
			
					this.list = this.list.concat(result.data.list);
			
					// this.list.forEach((item) => {
					// 	item.expire_timeObject = this.formatTimeDifference(item.expire_time)
					// 	item.labelList = item.label.split(",")
					// })
			
			
			
					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}
			
			
			},
		}
	}
</script>

<style lang="less" scoped>
	.phoneBtn{
		margin-top: 40rpx;
		
		height: 100rpx;
		border-radius: 130rpx;
		color: #fff;
		background: rgb(120, 93, 246);
	
	}
	.getPhone {
		height: 96rpx;
		border-radius: 124rpx;
	    padding-left: 20rpx;
		background: #f5f5f9;
		position: relative;
	
		.ckPhone {
			height: 96rpx;
			line-height: 100rpx;
			width: 220rpx;
			background-color: transparent;
			color: #000;
		}
		
		.verificationCode {
			z-index: 999;
			position: absolute;
			right: 0;
			text-align: center;
			width: 170rpx;
			height: 65rpx;
			line-height: 65rpx;
			border-radius: 100rpx;
			font-size: 20rpx;
			background: #7D5CF7;
			color: #fff;
		}
	}
	.gzhCard {
		background-repeat: no-repeat;
		padding: 80rpx;
		// background-color: #fff;
		background-size: contain;
		background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-13/6321c20240613101922884.png');
		height: 708rpx;
		width: 650rpx;

		.qrcode {
			margin: 20rpx 0;
			width: 251.02rpx;
			height: 251.2rpx;
		}
	}

	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		
		// height: 100vh;

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.swiperList {

			margin-top: 20rpx;



			.swiper {
				margin-bottom: 10rpx;

				border-radius: 20rpx;
				width: 100%;
				height: 76rpx;


				background: #fff;


			}



		}

		.groupList {
			border-radius: 20rpx;

			margin-top: 20rpx;

			padding: 20rpx;
			background: rgb(255, 255, 255);

			.groupImg {
				width: 158.84rpx;
				height: 156rpx;
			}

			.humanHead {
				width: 22.58rpx;
				height: 22.68rpx;
			}

			.topMounted {
				width: 68rpx;
				height: 36rpx;
				border-radius: 12rpx;
				color: #fff;
				background: rgb(1, 145, 255);
				margin-right: 5rpx;
			}

			.addGroup {
				padding: 10rpx 20rpx;
				height: 48rpx;
				border-radius: 132rpx;
				color: #fff;
				background: linear-gradient(270.00deg, rgb(89, 131, 255), rgb(162, 52, 255) 100%);
			}
		}

		.swiper-item {
			.noticeImg {
			
				height: 24px;
				width: 24px;
				margin-left: 50rpx;
			}

			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

	}
</style>